<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<header>
					<van-nav-bar @click-left="$router.push({path:leftPath})" :border="false">
						<van-icon name="arrow-left" slot="left" color="#676767" />
					</van-nav-bar>
				</header>

				<section>
					<div>
						<div class="title ">
							<div class="lock">

							</div>
							<p>确认助记词</p>
							<span>请按顺序点击助记词，以确认你的真确备份</span>
						</div>

						<div class="words" :class="listArr.length == 12?'':'has'">
							<van-grid :column-num="4" :border="false" :class="list2.length == 0?'':'floor2'">
								<van-grid-item v-for="(item,index) in list2" :key="index" class="after-click">
									<span @click="deleteWord(item,index)">{{item}}</span>
								</van-grid-item>
							</van-grid>
							<van-grid :column-num="4" :border="false" v-if="list != '' && list != null">
								<van-grid-item v-for="(item,index) in list" :key="index" v-if="listArr.indexOf(index) == -1">
									<span @click="selectWord(item,index)">{{item}}</span>
								</van-grid-item>
							</van-grid>
						</div>
						<button :class="selectType?'disable':'next'" :disabled="selectType" @click="monicSure">完成</button>
					</div>
				</section>
			</div>
		</div>

	</div>
</template>
<script>
	import { base } from '../../../utils/api';
	import Axios from 'axios';
	export default {
		data() {
			return {
				list: [

				],
				list2: [],
				listArray: [],
				listString: "",
				listArr: [],
				selectType: true,
				leftPath: localStorage.backUpBack
			};
		},
		mounted() {
			if(localStorage.getItem('Mnemonic')) {
				let lis = localStorage.getItem('Mnemonic')
				this.list = lis.split(" ");
			}

		},
		methods: {
			selectWord(item, index) {
				if(this.listArr.includes(index)) {
					this.listArr.splice(this.listArr.indexOf(index), 1);
					this.listArray.splice(this.listArray.indexOf(item), 1);
					this.list2.splice(this.listArray.indexOf(item), 1);

				} else {
					this.listArr.push(index); //保存下标
					this.listArray.push(item); //保存助记词
					this.list2.push(item); //将助记词添加到上一栏

				}

				if(this.listArray.length == 12) {
					this.selectType = false;
				} else {
					this.selectType = true;
				}

			},
			deleteWord(item, index) {
				this.list2 = [];
				this.listArr = [];
				this.listArray = [];
			},
			monicSure() {
				let params = {
					'mnemonicList': this.listArray
				}
				this.axios.post(process.env.API_HOST + 'dapp/backup', params, {
					Authorization: 'bearer ' + localStorage.mytoken
				}).then(res => {
					if(res.code == 200) {
						this.$router.push({
							path: localStorage.backUpBack
						})
					}
				})
			}
		}
	};
</script>
<style lang="less" scoped>
	section {
		width: 335px;
		margin: 0 auto;
	}
	
	.title {
		margin-top: 30px;
		text-align: center;
		.lock {
			margin: 0 auto;
			width: 50px;
			height: 50px;
			background-image: url(../../../assets/images/lock_03.png);
			background-size: 100% 100%;
		}
		p {
			font-size: 14px;
			color: #333333;
			margin: 18px 0;
		}
		span {
			font-size: 12px;
			color: #999;
			margin-bottom: 20px;
			display: block;
		}
	}
	
	.has {
		border-bottom: 1px solid #b8c2cb;
	}
	
	.words {
		margin: 0 auto;
		border-top: 1px solid #b8c2cb;
		padding: 10px 0;
		.floor {
			padding-top: 20px;
		}
		.floor2 {
			border-bottom: 1px solid #b8c2cb;
		}
		span {
			color: #333333;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			display: inline-block;
			width: 65px;
			height: 22px;
			border: 1px solid #eaecf6;
			border-radius: 5px;
		}
		.after-click span {
			background: #eaecf6;
			border: none;
		}
	}
	
	button {
		width: 100%;
		height: 36px;
		line-height: 36px;
		font-size: 12px;
		border-radius: 7px;
		color: #fff;
		margin-top: 90px;
		border: none;
	}
	
	.next,
	.diable {
		background: #108ce9;
	}
	
	.disable {
		background: #ccc;
	}
</style>